<div id="cards" class="page-layout simple fullwidth doc-page">

    <!-- HEADER -->
    <div class="header md-accent-bg" layout="row" layout-align="space-between">
        <div layout="column" layout-align="center start">
            <div class="breadcrumb" layout="row" layout-align="start center">
                <md-icon md-font-icon="icon-home" class="s16"></md-icon>
                <md-icon md-font-icon="icon-chevron-right" class="s16 separator"></md-icon>
                <span class="parent">COMPONENTS</span>
            </div>
            <div class="title">Cards</div>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content" md-background-bg>

        <p>
            Cards are useful for showing excerpts, quick information or notifications. Using
            <code>ms-card</code> directive you can easily create different cards compatible with Google's Material
            Design specifications.
        </p>

        <p>
            <code>ms-card</code> directive templates have pre-defined content areas. The reason for that is to force
            you to create cards that follows both Google's Material Design specifications and Fuse Theme's general
            design rules. But of course you can create your own designs and templates and use them with
            <code>ms-card</code>
            directive.
        </p>

        <div>

            <div class="md-title mt-32">Template 1</div>

            <!-- MS-CARD -->
            <ms-card template="'app/core/directives/ms-card/templates/template-1/template-1.html'" ng-model="vm.cards[0]"></ms-card>
            <!-- / MS-CARD -->

            <div class="md-title mt-48">Template 2</div>

            <!-- MS-CARD -->
            <ms-card template="'app/core/directives/ms-card/templates/template-2/template-2.html'" ng-model="vm.cards[1]"></ms-card>
            <!-- / MS-CARD -->

            <div class="md-title mt-48">Template 3</div>

            <!-- MS-CARD -->
            <ms-card template="'app/core/directives/ms-card/templates/template-3/template-3.html'" ng-model="vm.cards[2]"></ms-card>
            <!-- / MS-CARD -->

            <div class="md-title mt-48">Template 4</div>

            <!-- MS-CARD -->
            <ms-card template="'app/core/directives/ms-card/templates/template-4/template-4.html'" ng-model="vm.cards[3]"></ms-card>
            <!-- / MS-CARD -->

            <div class="md-title mt-48">Template 5</div>

            <!-- MS-CARD -->
            <ms-card template="'app/core/directives/ms-card/templates/template-5/template-5.html'" ng-model="vm.cards[4]"></ms-card>
            <!-- / MS-CARD -->

            <div class="md-title mt-48">Template 6</div>

            <!-- MS-CARD -->
            <ms-card template="'app/core/directives/ms-card/templates/template-6/template-6.html'" ng-model="vm.cards[5]"></ms-card>
            <!-- / MS-CARD -->

            <div class="md-title mt-48">Template 7</div>

            <!-- MS-CARD -->
            <ms-card template="'app/core/directives/ms-card/templates/template-7/template-7.html'" ng-model="vm.cards[6]"></ms-card>
            <!-- / MS-CARD -->

            <div class="md-title mt-48">Template 8</div>

            <!-- MS-CARD -->
            <ms-card template="'app/core/directives/ms-card/templates/template-8/template-8.html'" ng-model="vm.cards[7]"></ms-card>
            <!-- / MS-CARD -->

            <div class="md-title mt-48">Template 9</div>

            <!-- MS-CARD -->
            <ms-card template="'app/core/directives/ms-card/templates/template-9/template-9.html'" ng-model="vm.cards[8]"></ms-card>
            <!-- / MS-CARD -->

            <div class="md-title mt-48">Template 10</div>

            <!-- MS-CARD -->
            <ms-card template="'app/core/directives/ms-card/templates/template-10/template-10.html'" ng-model="vm.cards[9]"></ms-card>
            <!-- / MS-CARD -->

        </div>

    </div>
    <!-- / CONTENT -->

</div>